<template>
	<el-dialog v-model="props.isShow" width="28%" @close="handleClose" class="transaction-spot-dialog-dark">
		<template #title>
			<p class="text-18px font-bold text-#ffffff">划转</p>
		</template>
		<template #default>
			<div class="w-full">
				<div class="mt-10px w-full">
					<div class="bg-#272727 rounded-10px p-20px">
						<div class="flex items-center justify-between">
							<div class="flex items-center w-20%">
								<img src="/contract/account.svg" class="w-16px h-16px">
								<p class="ml-20px text-#86909C text-14px">从</p>
							</div>
							<div class="w-80%">
								<SelectBoxL title="资金账户" :list="listAccount"></SelectBoxL>
							</div>
						</div>
						<div class="mb-10px mt-10px">
							<img src="/contract/to-down.svg" class="w-16px h-16px">
						</div>
						<div class="flex items-center justify-between">
							<div class="flex items-center w-20%">
								<img src="/contract/contract.svg" class="w-16px h-16px">
								<p class="ml-20px text-#86909C text-14px">至</p>
							</div>
							<div class="w-80%">
								<SelectBoxL title="资金账户" :list="listContract"></SelectBoxL>
							</div>
						</div>
					</div>
					<div class="mt-20px">
						<p class="text-12px text-#86909C">
							币种
						</p>
						<div class="mt-10px p-20px border-1px rounded-10px border-solid border-#202020 flex items-center">
							<img src="/purchase/usdt.svg" class="w-20px h-20px">
							<p class="ml-10px text-#ffffff text-14px">USDT</p>
						</div>
					</div>
					<div class="mt-20px">
						<p class="text-12px text-#86909C">
							币种
						</p>
						<div
							class="mt-10px p-20px border-1px rounded-10px border-solid 
							box-border h-62px
							border-#202020 flex items-center justify-between">
							<div class="w-80%">
								<el-input />
							</div>
							<p class="ml-10px text-#114CEE text-14px">最大</p>
						</div>
						<p class="text-right text-12px text-#86909C mt-10px">
							<span class="text-#ffffff">
								1,0000
							</span>
							可用资产
						</p>
					</div>
				</div>
				<div class="mt-40px mb-20px">
					<el-button color="#114CEE" style="width: 100%;height:50px;color:#fff;font-size:18px;">确认</el-button>
				</div>
			</div>
		</template>

	</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import SelectBoxL from '../components/SelectBoxL.vue';
interface IProps {
	isShow: boolean;
}

const props = defineProps<IProps>();
const emit = defineEmits(['close'])

const handleClose = () => {
	emit('close', false);
}
const listAccount = ref<any[]>([
	{
		value: '资金账户',
		label: '资金账户'
	},
	{
		value: '理财账户',
		label: '理财账户'
	}
])
const listContract = ref<any[]>([
	{
		value: 'U本位合约',
		label: 'U本位合约'
	}
])

</script>
<style scoped lang="scss">
::v-deep .el-input__wrapper {
	background-color: #2B2B2B;
	border: none;
	box-shadow: none;
}
</style>
<style lang="scss">
.transaction-spot-dialog-dark {
	background: #2B2B2B;
}
</style>
